Please note: the viewport design is copied from Steve Den Beste's excellent blog, USS Clueless. Used with permission.


Saturday, March 06, 2004  

Ferrari Formula 1

Formula 1 season starts, in Australia

Watching the Formula 1 race reminds me that Australia is on the other side of the world (as a look at Punkclown's site the other day did -- it was already tomorrow, at 5 p.m. here in New York State). Ferrari and Bridgestone were doing well, with only a few laps left. Worth watching the screaming cars...

There, Michael's won. Not quite midnight here...

posted by Gary Williams at 10:52 PM | link |
 

Neat Site For Sysadmins (if you can take a joke)

Via Slashdot here's a link to a good site: http://www.sysadminco.com/. Or you you could become a zombie.

posted by Gary Williams at 12:42 PM | link |


Friday, March 05, 2004  

via Molskinerie

Columbus, Christophorus



koltit.gif"MARABU (= Mannheimer Reihe Altes Buch), formerly called Editio Theodoro-Palatina, is an online series of rare books and manuscripts of the early modern period originating from old Mannheim libraries. It offers free access to portrait galleries, emblem and fable books, maps, writings of learned women, sources of the history of the Palatinate, and more ... Our facsimile color reproductions are each accompanied by an introduction and a table of contents."

A Part of MATEO, a cooperative effort of members of Mannheim University

Image: Columbus, Christophorus: Epistola de insulis nuper inventis

(Beigefügt an:) Verardus, Carolus: Historia Baetica.

- Basel: Johann Bergmann von Olpe, 1494. - 36 Bl., 6 Holzschnitte; 19,2 x 14,6 cm

posted by Gary Williams at 12:58 AM | link |
 

via Riley Dog

The Grand Miracle


As to whether he multiplied
loaves and fishes, that's common enough.
Poke seed-corn in a hole and see if more corn

doesn't grow. Two fish in a pond
make more fishes. The altar of reason
supports such extravagance. (I don't even know

how electricity works, but put trust
in light switches.) And the prospect
of love cheers me up, as gospel.
:: so dumbly I open this mouth for bread and song

><((((º>

posted by Gary Williams at 12:44 AM | link |


Thursday, March 04, 2004  

via whiskey river
"The way of awakening and freedom requires that we ask ourselves, with all of the earnestness, honesty, and humility at our command, just this one fundamental question:
?Am I willing to live this moment with as much attention and affection as possible, or am I going to do something else??
- Scott Morrison

posted by Gary Williams at 11:08 PM | link |
 


Step Colors In Table



                            
                            
                            
                            
                            
                            
                            



Red Start Val: Green Start Val: Blue Start Val:




posted by Gary Williams at 3:30 PM | link |
 

via Moleskinerie

Journeys: Morocco



Birdwatching
"Essaouira is a beautiful fishing village on the Atlantic coast of Morocco not too far from Marrakech. The sea walls are castellated with various turrets and round windows like this. The story goes that Jimi Hendrix wrote the song "Castles Made of Sand" here. It has always been a popular place with artists and musicians."

posted by Gary Williams at 1:47 AM | link |
 

via whiskey river
"When you meet a fencing master, show him your sword.
Do not give your poem to a man who's not a poet."
- Master Lin-Chi

posted by Gary Williams at 12:56 AM | link |


Wednesday, March 03, 2004  


Making color flashing tables



                            
                            
                            
                            
                            
                            
                            




This is a simple JavaScript effect that depends on naming the cells of the table so you can assign background colors to each cell. Here's what the HTML looks like:


<center><div style="width:90px;border:1px solid black;">
<table cellpadding=0 cellspacing=0 style="font-size:36pt;"><tr>
<td id=r00>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r01>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r02>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r03>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r04>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r05>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r06>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
<td id=r10>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r11>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r12>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r13>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r14>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r15>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r16>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
<td id=r20>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r21>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r22>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r23>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r24>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r25>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r26>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
<td id=r30>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r31>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r32>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r33>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r34>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r35>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r36>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
<td id=r40>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r41>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r42>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r43>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r44>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r45>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r46>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
<td id=r50>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r51>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r52>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r53>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r54>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r55>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r56>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
<td id=r60>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r61>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r62>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r63>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r64>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r65>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td id=r66>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr></table>
</div>
<input type=button value="On " onClick="ok=true;flash();">
<input type=button value="Off" onClick="ok=false;">
</center>


So the cells are named r00 to r66. Here's the JavaScript:


Rather than coding within Blogger (which usually doesn't work, because Blogger adds <BR> at the end of each line, which is illegal in JavaScript) we include the JavaScript file from my server:

<script type="text/javascript" src="http://home.corninglink.com/gwms/colorFlash.js"></script>

Here's what's in that file:



<!-- Begin

colors = ["00", "33", "66", "99", "aa", "cc", "ff",
"99", "aa", "cc", "ff", "99", "aa", "cc", "ff"];
var ok = false;

function flash() {
if(!ok) return;
r00.bgColor = "#" + colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)];
r01.bgColor = "#" + colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)];
r02.bgColor = "#" + colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)];
r03.bgColor = "#" + colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)];
r04.bgColor = "#" + colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)];
r05.bgColor = "#" + colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)];
r06.bgColor = "#" + colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)] +
colors[Math.round(Math.random()*15)];

...<snip -- this continues through row r66>

setTimeout('flash()', 50);
return;
}
// End -->


The colors are constructed from the elements of Meg's Color Chart, which I notice use colors constructed with 00, 33, 66, 99, aa, cc and ff (like #FF9900). These are all generally available colors in all browsers, and it limits the colors to a small number of choices, which makes the code easy to write. You'll notice that I've repeated the values in the colors array -- by making 99 and higher three times as available as the low values, you get a lot more light colors. The basic construct is
r00.bgColor = "#" + colors[Math.round(Math.random()*15)] + colors[Math.round(Math.random()*15)] + colors[Math.round(Math.random()*15)];
which constructs the hex designator for the color (like #FF9900). Math.random()*15 produces a random value between 0 and 15; the Math.round() call reduces it to an integer, while the colors[] reference produces a two-letter element, which we've concatenated to produce the color designator. Because each cell is random, you get this flashing color block.

posted by Gary Williams at 10:05 PM | link |
 

Dr. Suess Postage Stampvia Rugged Elegance

Dr. Seuss Gets His Own Postage Stamp, Bronze Statue & A Star on Hollywood's Walk of Fame



Yesterday, a United States postage stamp was issued to honor Dr. Seuss. Today, a statue is being erected in his home town, at the University of California, San Diego Geisel Library. On March 11th, Theodor Seuss Giesel, aka Dr. Seuss, will get a star on Hollywood's Walk of Fame.

Yesterday, the New York Times wrote:

It's all part of a bicoastal celebration of the centennial of Theodor Geisel, best known as Dr. Seuss, the man responsible for the Grinch, the Cat in the Hat and the Lorax, among other unforgettable creatures.
Today, the Geisel Library, unveils a bronze statue showing "Ted sitting at his desk, one of his legs plopped on its top with `The Cat in the Hat' standing behind him," his wife, Audrey, said. "It's perfect because that man never had both feet on the ground. One leg represents reality, the other his imagination."

Geisel died in 1991, at 87, after a life that traded in the imagination. Son of a zookeeper father, Theodor Geisel was born on March 2, 1904, in the factory town of Springfield, Mass. At an early age he began to draw animals, often adding an extra hump in a camel's back or a long snout on a hyena's face for comic effect. While attending Dartmouth College he edited Jack O'Lantern, a humor magazine. But it was his Latin classes that had the most enduring influence on his future art. "It allows you to adore words," Geisel once said about Latin, "take them apart and find out where they came from."

[more]

posted by Gary Williams at 2:26 PM | link |


Tuesday, March 02, 2004  


Cockaigne 1993-2003
The New York Times (registration required)

In Vincent Desiderio's ambitious new painting, "Cockaigne," six centuries of Western art lie scattered on the floor like the remains of a really great party. A virtuoso representational painter known for his large-scale, postmodernist allegories, Mr. Desiderio worked on the 13-by-9-foot "Cockaigne" on and off for 10 years. On the pages of the books in the painting, he painstakingly reproduced miniature versions of his favorite works by artists ranging from Masaccio, Vermeer and van Eyck to Matisse, Jasper Johns and Chuck Close.

The title is a reference to Pieter Bruegel the Elder's "Land of Cockaigne" (1559), a moral allegory set in a land of plenty where the houses are tiled with cakes, the fences are made of sausages and the fowl fly roasted and ready to eat. The targets in Bruegel's painting were gluttony and sloth; Mr. Desiderio's version is a critique of what he calls "cultural bulimia" ? our compulsive consumption of images that only leaves us hungry for more. It is also a comment on the predicament of painting in the 21st century: faced with such a plethora of styles and formal idioms, how is it possible to create something new, something distinctively relevant to our own time? "Cockaigne" is one artist's response to what the critic Harold Bloom called the "anxiety of influence," an attempt, in Mr. Desiderio's words, "to reconfigure the history of art in order to create imaginative space for ourselves." The painting is on display at the Marlborough Gallery, 40 West 57th Street, through Saturday.

Mr. Desiderio was trained as an abstract painter, but in the late 80's he switched to a figurative, old masterly style. However, Abstract Express-ionism remains an important influence. The all-over composition and palette-knifed surfaces of this painting were directly inspired by Willem de Kooning's "Excavation" (1950). He kept a reproduction of the de Kooning pinned to the wall next to his canvas as he worked.

In its early stages, the painting was a flattened, frenetic composition of little squares. As he progressed, Mr. Desiderio transformed each square into a book that seems to lie on a receding plane. Because the perspectival orientation of each book is slightly different, the floor seems to undulate, creating the impression of a sea of floating images.
[more]

posted by Gary Williams at 10:40 PM | link |
 

Drop Shadow Animation Burst

This is about the last of the shadow filter animation posts (unless I stumble across a better effect). In this one, rather than a sequence of ordered movements, I'm using the JavaScript random() function to make the effect jump around. It's effectively similar to the demos below, so I'm not going to bother explicating the code entirely -- you can click on the demo button and then right-click-view-source on the resulting popup window to read the code, if you like.



The important code is selecting the class using the random() function, which makes the JavaScript code quite short:

function doBounce() {

if( !ok ) return;
ii = Math.round(Math.random()*40);

idbounce.className = 'fg' + ii;
timer = setTimeout('doBounce()', dbrate);
}


The Math.random() function returns a pseudo-random number between 0 and 1, so it's use is usually to multiply by the upper limit of the array being referenced (or in our case, the array of CSS classes we've defined). To obtain an integer value, we enclose the expression in the Math.round() call. You should note that this does not obtain a completely fair selection from the array, since the endpoints are given a lesser chance of selection (the low and high endpoints are selected only by .5 values -- 0 to .5 for low, top to (top - .5) for the top -- while the middle values are selected by (n - .5) to (n + .5)).

posted by Gary Williams at 9:09 PM | link |
 

Rotating Shadows And A Dancing Demo

Yesterday I did an animated DropShadow filter demo, and then Meg at Mandarin Design has a post about using nested DIV's to set up a shadow effect, which I added some variations (below, with varying DIV sizes and added strength= and direction= clauses in the shadow() filter). I've been working on a rotating shadow filter demo, but the image shadow moved while the headline shadow didn't appear at all. This morning I looked at Meg's site and she'd left me a comment suggesting using a fixed size in the text DIV -- or the shadow filter wouldn't work. So I tried it, and it did work! You can try it out in a popup window. (Note: I also changed the size of the headline, so you'd be better off to click on the Image button first: otherwise it's hard to hit the buttons, because they jump around.) Click the demo button:



The first demo jumps around a lot, which is an interesting effect, but it makes looking at the rotating shadow difficult, so I've written a second demo which keeps the text size constant and stops jumping around (the first one is documented below, the second one you must look at the source yourself if you're interested). Here's the second demo:




Like the other animating demos -- except the glow() filter -- I couldn't get the internal structure references to work, so I had to reassign the classes to make it work. This one only uses 9 classes:

<style type="text/css">
.c0 {filter:shadow(color:#00FFFF, direction:0, strength:10) Glow(Color=#FF0000, Strength=4);font-size: 60;width=500px;}
.c1 {filter:shadow(color:#00FFFF, direction:45, strength:10) Glow(Color=#FF0000, Strength=4);font-size: 72;width=500px;}
.c2 {filter:shadow(color:#00FFFF, direction:90, strength:10) Glow(Color=#FF0000, Strength=4);font-size: 48;width=500px;}
.c3 {filter:shadow(color:#00FFFF, direction:135, strength:10) Glow(Color=#FF0000, Strength=4);font-size: 36;width=500px;}
.c4 {filter:shadow(color:#00FFFF, direction:180, strength:10) Glow(Color=#FF0000, Strength=4);font-size: 30;width=500px;}
.c5 {filter:shadow(color:#00FFFF, direction:225, strength:10) Glow(Color=#FF0000, Strength=4);font-size: 48;width=500px;}
.c6 {filter:shadow(color:#00FFFF, direction:270, strength:10) Glow(Color=#FF0000, Strength=4);font-size: 60;width=500px;}
.c7 {filter:shadow(color:#00FFFF, direction:315, strength:10) Glow(Color=#FF0000, Strength=4);font-size: 72;width=500px;}
.c8 {filter:shadow(color:#00FFFF, direction:360, strength:10) Glow(Color=#FF0000, Strength=4);font-size: 60;width=500px;}
</style>


The width= clause, as it turned out, is required to make the filters work; the shadow direction (it turned out) is limited not only to the range 0 to 360 (the angle) but also to 45 degree increments, so that's why you see the directions above. I wanted to make the shadow rotate in a full circle, so I used 9 classes -- 0 and 360 should be the same, but there seemed to be a gap when I left out the 0, so I went ahead and added that one. Before Meg gave me the tip to make the shadow work (the width clause -- could've been height too, but I didn't bother), I tried changing the font size so the headline would do something. That turns out to be an impressive animation, so I left it in...

Here's the HTML code:

<center>
<div id=headline class="c7" >Rotating Shadow Demo</div>
<br>
<img id=star src="http://home.corninglink.com/gwms/loops.gif" alt="loops" border=3 width=400 height=400 style="background-image:url('http://home.corninglink.com/gwms/dot.gif');">
<br>
<input type=button value="Headline" onClick="ok=true;rotateHeadline();">
<input type=button value=" Image " onClick="ok=true;rotateImageShadow();"><br>
<input type=button value=" Off " onClick="ok=false;"><br>
<b>Headclass </b> <input type="Text" id="headcl" value="0" maxlength=3 size=3>
<b>Imageclass </b> <INPUT TYPE="Text" id="imagecl" VALUE="0" MAXLENGTH="3" SIZE="3">
</center>


Please note one feature that's different from the earlier animation demos -- the background URL in the image. It's not important to the effect being demonstrated here, but I does show a way to add a layered element to the image -- I'll probably do a post sometime soon about using layered images since that's the way the viewport at the top of the page is constructed, making it easy to add a new image on a daily basis and preserve the overall look (and give the page a nice framed look).

Like the other animation demos, it's important that the elements of the page be given ID clauses to make them accessible in the JavaScript code. Again, the text elements are used to give an easy display of the variables in the JavaScript code. Here's the JavaScript code:



<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

var rate = 100;
var i = 1;
var ii = 2;
var ok = false;
var topval = 7;

function rotateHeadline() {
if( !ok )return;
i++;
headline.className = 'c' + i;
headcl.value = 'c' + i;

if( i > topval ) i = -1;

timer = setTimeout('rotateHeadline()', rate);
}
function rotateImageShadow() {
if( !ok ) return;
ii++;
star.className = 'c' + ii;
imagecl.value = 'c' + ii;

if (ii > topval ) ii = -1;
timer = setTimeout('rotateImageShadow()', rate);
}
// End -->
</script>


Oh, the image was originally a star picture, so that's why the image ID is "star". And since I just wanted a looping circle, the direction of the loop isn't changed and the variables are simply incremented.

posted by Gary Williams at 11:47 AM | link |
 

Double DIV Shadow Effects With Direction And Strength

Today, Meg at Mandarin Design has a piece about using a enclosing DIV to set the shadow filter on an image. Here I've extended Meg's work by showing the effects of a larger outer frame and adding the strength= and direction= clauses to the shadow filter. (I'm not going to bother showing off the code, you can go to Meg's post to see the basic design, or you can right-click-view-source to look at the table code here.)

width, height=115
width, height=125
width, height=155
width, height=115
strength=20
width, height=125
strength=20
width, height=155
strength=20
width, height=115
strength=30
direction=135
width, height=125
strength=30
direction=135

width, height=155
strength=30
direction=135

posted by Gary Williams at 1:16 AM | link |


Monday, March 01, 2004  

More (Simplified, With Many More Classes) Annimated DropShadow With JavaScript

Overnight I thought about my previous post about animating DropShadow effects http://tfs_reluctant.blogspot.com/2004_02_29_tfs_reluctant_archive.html#107804535036747540 and realized it wouldn't work very well if I needed a large number of classes. So I rewrote it, with a lot closer movements (and a lot more of them) with 177 classes -- demo here:




This uses the same HTML as the earlier post (with another text block for displaying the index in the image loop separately from the headline, since the two loops run independently). The key difference is the assignment of the classes. Here's the code:



<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

var rate = 100;
var i = 1;
var idir = 1;
var F = 'fg1';
var ok = false;
var topval = 176;

function doThing() {
if( !ok )return;
i += idir;

//debug
ival.value=i;

idbabble.className = 'fg' + i;

if(i<2 || i>topval) { idir = -idir; }

timer = setTimeout('doThing()', rate);
}

var dbrate = 100;
var ii = 2;
var dir = 1;

function doBounce() {
if( !ok ) return;
ii += dir;

//debug
iival.value=ii;

idbounce.className = 'fg' + ii;

if (ii > topval || ii < 2) {
dir = -dir;
}
timer = setTimeout('doBounce()', dbrate);
}

// End -->
</script>


The key change is the switch from the use of a set of if tests to assign the classname to a variable to the construction of the classname directly:

idbabble.className = 'fg' + i;
idbounce.className = 'fg' + ii;


Since with 177 classes the if tests would have been preposterous. The classes are done in four repeated groups (with the second group X value negative, the third group having both X and Y values negative and the last group having just the Y values negative).
Here's the CSS class definitions for the first group:


.fg1 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=1, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg2 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=1, OffY=2, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg3 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=1, OffY=3, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg4 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=1, OffY=4, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg5 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=1, OffY=5, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg6 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=2, OffY=6, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg7 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=3, OffY=7, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg8 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=4, OffY=8, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg9 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=5, OffY=9, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg10 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=6, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg11 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=7, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg12 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=7, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg13 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=8, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg14 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=9, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg15 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=10, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg16 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=11, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg17 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=12, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg18 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=13, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg19 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=14, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg20 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=15, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg21 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=16, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg22 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=17, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg23 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=18, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg24 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=19, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg25 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=20, OffY=10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg26 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=19, OffY=9, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg27 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=18, OffY=8, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg28 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=17, OffY=7, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg29 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=16, OffY=6, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg30 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=15, OffY=5, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg31 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=14, OffY=4, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg32 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=13, OffY=3, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg33 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=12, OffY=2, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg34 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=11, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg35 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=10, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg36 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=9, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg37 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=8, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg38 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=7, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg39 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=6, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg40 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=5, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg41 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=4, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg42 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=3, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg43 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=2, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg44 {width:200px;height:100px; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=1, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}


You might be asking why 177 classes when it's four groups of 44 -- that's because I missed a number in the second group (when I ran the demo, the class 77 made the page jump back to the original (no class set) size when the code assigned the missing class. I didn't feel like retyping all those classes, so I just added a duplicate to fill in the missing classname. Duh. Testing is what make a program work, since typing certainly doesn't!

posted by Gary Williams at 8:21 PM | link |
 

via whiskey river
It's like Zen," he says,
"so filled with paradoxes that it jumps through hoops
that aren't even there."
- Dick Allen





"Beware of the man who works hard to learn something, learns it, and finds himself no wiser than before. He is full of murderous resentment of people who are ignorant without having come by their ignorance the hard way."
- Kurt Vonnegut





"As for me, I am rather often uneasy in my mind, because I think that my life has not been calm enough; all those bitter disappointments, adversities, changes keep me from developing fully and naturally in my artistic career."
- Vincent van Gogh





"Well while I?m here I?ll
do the work -
and what?s the Work?
To ease the pain of living.
Everything else, drunken
dumbshow."
- Allen Ginsberg
Mind Writing Slogans





"...as I have said often enough, I write for myself in multiplicate, a not unfamiliar phenomenon on the horizon of shimmering deserts."

- Vladimir Nabokov

posted by Gary Williams at 2:00 AM | link |


Sunday, February 29, 2004  

via News.com.au

Quake shakes Wagga Wagga

February 29, 2004

A MINOR earthquake was reported overnight at Wagga Wagga in southern NSW.

Police said there were no reports of damage or injury from the quake, which measured 3.3 on the Richter scale.

Emergency services received numerous phone calls from residents who reported hearing noises and feeling the tremor.

Police said they had contacted Geo-Science Australia and the duty seismologist confirmed there had been an earthquake.

The epicentre was believed to have been in the Wantabadgery Gap area 45km west of Wagga Wagga.

posted by Gary Williams at 4:23 PM | link |
 

Animating DropShadow Filters Using Class Shifting

I've been fiddling with animation using the drop-shadow filter effect. Once again, the Blogger structures make it difficult to demonstrate the effect within a post in Blogger, but it's easy enough to do as a separate, popup window demo:




Here's the CSS definition for a drop shadow filter:


filter:dropshadow(color=colorval,offx=npx,offy=npx,positive=1,enabled=0)

Color is the name or RGB value of the color for the shadow.
OffX and OffY are the number of pixels to offset the shadow from the object. Positive integers move the shadow to the right or down. Negative integers move the image to the left or up.
Positive can be set to 1 or 0. For normal objects, Positive=1 creates a normal drop shadow and Positive=0 creates a shadow within the non-transparent region with the shadow direction reversed. For transparent objects, the reverse is true.
Enabled specifies whether the effect is active (true or non-zero) or inactive (false or 0).


In this demo, I wanted to vary the values of the OffX and OffY parameters, but I was unable to find the structure references for use in JavaScript code. So what I did was define a set of CSS classes and add code to drive the assignment of the classes. Here are the class definitions:


<style type="text/css">
.fg1 {width: 200; height: 100; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=1, OffY=1, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg2 {width: 200; height: 100; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=-5, OffY=5, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg3 {width: 200; height: 100; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=10, OffY=-10, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg4 {width: 200; height: 100; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=-15, OffY=-15, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg5 {width: 200; height: 100; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=20, OffY=20, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg6 {width: 200; height: 100; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=-25, OffY=25, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg7 {width: 200; height: 100; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=30, OffY=-30, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg8 {width: 200; height: 100; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=-35, OffY=-35, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg9 {width: 200; height: 100; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=40, OffY=40, Positive=10) Glow(Color=#FF0000, Strength=4)}
.fg10 {width: 200; height: 100; text-transform: uppercase; font-size: 72; font-weight: bolder; Filter: DropShadow(Color=#0000FF, OffX=50, OffY=50, Positive=10) Glow(Color=#FF0000, Strength=4)}
</style>


Here's the HTML definitions I used to define the objects where the varying effects can be invoked:


<center>
<h1 id=idbabble>Drop Shadow Animation Demo</h1>

<img id=idbounce src="http://home.corninglink.com/gwms/atom_ani300x300.gif" border=0 width="300" height="300">
<P><P><P>
<input type=button value="doThing" onClick="ok=true;doThing();">
<input type=button value="doBounce" onClick="ok=true;doBounce();"><br>
<input type=button value=" Off " onClick="ok=false;"><br>
<b>ival: </b> <INPUT TYPE="Text" id="ival" VALUE="0" MAXLENGTH="3" SIZE="3">
</center>


It's essential to apply the ID clauses both to the text headline and the image for the code to work. The buttons allow the user to invoke the JavaScript functions separately on the two objects; the Off button turns off both loops. The text field is used to display the current loop value (of the top loop only).



<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

var rate = 100;
var i = 0;
var idir = 1;
var F = 'fg1';
var ok = false;

function doThing() {
if( !ok )return;
i += idir;

//debug
ival.value=i;

if (i==1) {
F = 'fg1';
idir = 1;
}
else if (i==2) F = 'fg2';
else if (i==3) F = 'fg3';
else if (i==4) F = 'fg4';
else if (i==5) F = 'fg5';
else if (i==6) F = 'fg6';
else if (i==7) F = 'fg7';
else if (i==8) F = 'fg8';
else if (i==9) F = 'fg9';
else {
F = 'fg10';
idir = -1;
}

idbabble.className = F;

timer = setTimeout('doThing()', rate);
}

var dbrate = 100;
var ii = 2;
var dir = 1;
var dbF = 'fg1';
var thingOn = true;

function doBounce() {
if( !ok ) return;
ii += dir;
if (ii==1) dbF = 'fg1';
else if (ii==2) dbF = 'fg2';
else if (ii==3) dbF = 'fg3';
else if (ii==4) dbF = 'fg4';
else if (ii==5) dbF = 'fg5';
else if (ii==6) dbF = 'fg6';
else if (ii==7) dbF = 'fg7';
else if (ii==8) dbF = 'fg8';
else if (ii==9) dbF = 'fg9';
else dbF = 'fg10';

idbounce.className = dbF;

if (ii > 9 || ii < 2) { dir = -dir;
}
timer = setTimeout('doBounce()', dbrate);
}

// End -->
</script>



In both functions the key is the assignment of the class: idbabble.className = F; for the headline and idbounce.className = dbF; for the image. It would have been better if I'd been able to assign values to the filter parameters the way I did for the glow filter, but the structure references idbabble.filters.dropshadow.OffX and so on didn't work -- they generated errors saying there was no such object instead.

posted by Gary Williams at 4:02 AM | link |

Support Bloggers' Rights!
Support Bloggers' Rights!

 

Free JavaScripts provided by
The JavaScript Source


Free Guestmap from Bravenet.com Free Guestmap from Bravenet.com
 


The WeatherPixie
Google

Search WWW TFS Reluctant

Googlism


Who What Where When
counter
homepage, email
and store
Blogs
Defunct Blogs
Toons
News, science
and stuff
Politics, government
and stuff
Cory
Doctorow's
Writing
Web and
Webhack stuff
archives